<template>
  <div class="container">
    <div class="card" style="margin-bottom: 5px">
      <el-input v-model="data.params.name" prefix-icon="Search" style="width: 240px; margin-right: 10px" placeholder="请输入宠物名称查询"></el-input>
      <el-button type="info" plain @click="load">查询</el-button>
      <el-button type="warning" plain style="margin: 0 10px" @click="reset">重置</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
        <div v-for="item in data.list" :key="item.id">
            <div>{{ item.userName }} 对 {{ item.petName + ' ' + item.actionName + ' ' + item.goodsName }} × {{ item.goodsAccount }} </div>
        </div>
    </div>

    <div class="card" v-if="data.total">
      <el-pagination @current-change="load" background layout="total, prev, pager, next" :page-size="data.params.pageSize" v-model:current-page="data.params.pageNum" :total="data.total" />
    </div>
  </div>
</template>

<script setup>
import request from '@/utils/request';
import { reactive } from 'vue';


const data = reactive({
    params: {
        pageSize: 10,
        pageNum: 1,
    },
    list: [],
    total: 0,
})

const load = () => {
    request.get('/petActionLog/list', {params: data.params}).then(res => {
        console.log(res);
        data.list = res.data?.list || []
        data.total = res.data?.total
        console.log(data.list);
        
    })
}
load()

</script>

<style>

</style>